<template>
  <el-row :gutter="20">
    <el-col :span="12">
      <el-card class="box-card">
        <h2>商品统计</h2>
        <div id="home"></div>
      </el-card>
    </el-col>
    <el-col :span="12">
      <el-card class="box-card">
        <h2>库存统计</h2>
        <div id="char2"></div> </el-card
    ></el-col>
  </el-row>

  <el-row :gutter="20" style="margin-top: 20px">
    <el-col :span="24">
      <el-card class="box-card">
        <h2>订单统计</h2>
        <div id="bottom"></div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script setup>
import { reactive, ref, inject, onMounted, triggerRef } from "vue";
var $echarts = inject("echarts");
console.log($echarts);
// var data = reactive({});
// data = JSON.parse(localStorage.getItem("user_info")).list;
// console.log(data);
var orderlist = reactive([]);
onMounted(() => {
  // orderlist = JSON.parse(localStorage.getItem("order_list")).list;
  // var sum = 0;
  // orderlist.forEach((item) => {
  //   item.good.forEach((goods) => {
  //     sum += goods.num;
  //   });
  // });
  // console.log(sum);
});
var data = reactive([
  { title: "连衣裙", num: 6681 },
  { title: "卫衣", num: 2222 },
  { title: "秋季外套", num: 1234 },
  { title: "男士上衣", num: 5623 },
  { title: "保暖秋裤", num: 2354 },
  { title: "羽绒服", num: 987 },
]);
var xdata = reactive([]);
var ydata = reactive([]);
// xdata = JSON.parse(localStorage.getItem("user_info")).list.map((v) => v.phone);
// ydata = JSON.parse(localStorage.getItem("user_info")).list.map(
//   (v) => v.password
// );
xdata = data.map((v) => v.title);
ydata = data.map((v) => v.num);
console.log(xdata);
console.log(ydata);

// 饼图数据
var pintu = [
  { name: "连衣裙", value: 60 },
  { name: "卫衣", value: 80 },
  { name: "秋季外套", value: 100 },
  { name: "男士上衣", value: 50 },
  { name: "保暖秋裤", value: 50 },
  { name: "羽绒服", value: 50 },
];

//折线图
onMounted(() => {
  let myChart = $echarts.init(document.getElementById("home"));
  myChart.setOption({
    grid: {
      top: "3%",
      left: "1%",
      right: "6%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: {
      type: "value",
    },
    yAxis: {
      type: "category",
      data: xdata,
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    series: [
      {
        data: ydata,
        type: "bar",
        barWidth: 35,
        itemStyle: {
          // borderRadius: [5, 10, 10, 5],
          // color: new $echarts.graphic.LinearGradient(0, 0, 1, 0, [
          //   {
          //     offset: 0,
          //     color: "orange",
          //   },
          //   {
          //     offset: 0.5,
          //     color: "#339ca8",
          //   },
          //   {
          //     offset: 1,
          //     color: "#cda819",
          //   },
          // ]),
          color: function (params) {
            let colorList = [
              "#91CD76",
              "#58B3CD",
              "lightblue",
              "skyblue",
              "#9924EE",
              "#EAA836",
            ];
            return colorList[params.dataIndex];
          },
        },
      },
    ],
  });

  let myChart2 = $echarts.init(document.getElementById("char2"));
  myChart2.setOption({
    legend: {
      top: "bottom",
    },
    tooltip: {
      show: true,
    },
    series: [
      {
        name: "库存统计",
        type: "pie",
        radius: [10, 100],
        center: ["50%", "45%"],
        roseType: "area",
        itemStyle: {
          borderRadius: 10,
          shadowBlur: 200,
          shadowColor: "rgba(0,0,0,.5)",
        },
        data: pintu,
      },
    ],
  });

  let myChart3 = $echarts.init(document.getElementById("bottom"));
  myChart3.setOption({
    tooltip: {
      trigger: "axis",
    },
    legend: {
      data: ["连衣裙", "Union卫衣", "秋季外套", "男士上衣", "保暖秋裤"],
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    toolbox: {
      feature: {
        saveAsImage: {},
      },
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        name: "连衣裙",
        type: "line",
        stack: "Total",
        data: [120, 132, 101, 134, 90, 230, 210],
      },
      {
        name: "Union卫衣",
        type: "line",
        stack: "Total",
        data: [220, 182, 191, 234, 290, 330, 310],
      },
      {
        name: "秋季外套",
        type: "line",
        stack: "Total",
        data: [150, 232, 201, 154, 190, 330, 410],
      },
      {
        name: "男士上衣",
        type: "line",
        stack: "Total",
        data: [320, 332, 301, 334, 390, 330, 320],
      },
      {
        name: "保暖秋裤",
        type: "line",
        stack: "Total",
        data: [820, 932, 901, 934, 1290, 1330, 1320],
      },
    ],
  });
});
</script>

<style lang="scss" scoped>
#home {
  height: 400px;
  margin-left: 100px;
}
#char2 {
  height: 400px;
}
#bottom {
  height: 400px;
}
h2 {
  text-align: center;
}
</style>